<template>
  <div v-loading="loading" class="report">
    <!-- <div class="reportTitle">
      <span class="title">工作数据情况</span>
      <span class="currentDate">2020/06/20</span>
    </div> -->
    <el-row :gutter="10">
      <el-col :span="8">
        <Card title="今日">
          <div class="sliderClass">
            <div class="intention">意向客户占比</div>
            <div class="slider">
              <el-slider v-model="reportInfo.dayIntentionalRate" :show-tooltip="false" disabled />
            </div>
            <div>{{ reportInfo.dayIntentionalRate > -1 ? (reportInfo.dayIntentionalRate).toFixed(2) : '--' }}%</div>
          </div>
          <div class="sliderClass">
            <div class="intention">预约测量占比</div>
            <div class="slider">
              <el-slider v-model="reportInfo.dayForecastRate" :show-tooltip="false" disabled />
            </div>
            <div>{{ reportInfo.dayForecastRate > -1 ? (reportInfo.dayForecastRate).toFixed(2) : '--' }}%</div>
          </div>
        </Card>
      </el-col>
      <el-col :span="8">
        <Card title="本月">
          <div class="sliderClass">
            <div class="intention">意向客户占比</div>
            <div class="slider">
              <el-slider v-model="reportInfo.monthIntentionalRate" :show-tooltip="false" disabled />
            </div>
            <div>{{ reportInfo.monthIntentionalRate > -1 ? (reportInfo.monthIntentionalRate).toFixed(2) : '--' }}%</div>
          </div>
          <div class="sliderClass">
            <div class="intention">预约测量占比</div>
            <div class="slider">
              <el-slider v-model="reportInfo.monthForecastRate" :show-tooltip="false" disabled />
            </div>
            <div>{{ reportInfo.monthForecastRate > -1 ? (reportInfo.monthForecastRate).toFixed(2) : '--' }}%</div>
          </div>
        </Card>
      </el-col>
      <el-col :span="8">
        <Card title="上月">
          <div class="sliderClass">
            <div class="intention">意向客户占比</div>
            <div class="slider">
              <el-slider
                v-model="reportInfo.lastMonthIntentionalRate"
                :show-tooltip="false"
                disabled
              />
            </div>
            <div>{{ reportInfo.lastMonthIntentionalRate > -1 ? (reportInfo.lastMonthIntentionalRate).toFixed(2) : '--' }}%</div>
          </div>
          <div class="sliderClass">
            <div class="intention">预约测量占比</div>
            <div class="slider">
              <el-slider v-model="reportInfo.lastMonthForecastRate" :show-tooltip="false" disabled />
            </div>
            <div>{{ reportInfo.lastMonthForecastRate > -1 ? (reportInfo.lastMonthForecastRate).toFixed(2) : '--' }}%</div>
          </div>
        </Card>
      </el-col>
    </el-row>
    <CardContainer class="clientInfo">
      <div v-for="(item, index) of clientInfoArr" :key="index" class="item">
        <span>{{ item.label }}</span>
        <span>{{ item.value }}</span>
      </div>
    </CardContainer>
    <CardContainer class="clientInfo">
      <div v-for="(item, index) of orderInfoArr" :key="index" class="item">
        <span>{{ item.label }}</span>
        <span>{{ item.value }}</span>
      </div>
    </CardContainer>
    <el-row :gutter="10" type="flex" align="stretch">
      <el-col :span="12">
        <CardContainer style="height:100%">
          <List :column="2" sep="：" type="flex" class="client">
            <ListItem label="今日预约自主进店" :value="reportInfo.dayEnterShopNum" />
            <ListItem label="本月预约自主进店" :value="reportInfo.monthEnterShopNum" />
            <ListItem label="今日预约测量" :value="reportInfo.dayForecastNum" />
            <ListItem label="本月预约测量" :value="reportInfo.monthForecastNum" />
          </List>
        </CardContainer>
      </el-col>
      <el-col :span="12">
        <CardContainer style="height:100%">
          <List :column="2" sep="：" type="flex" class="client">
            <ListItem label="今日成品客户" :value="reportInfo.dayTransFinishNum" />
            <ListItem label="本月成品客户" :value="reportInfo.monthTransFinishNum" />
            <!-- <ListItem label="今日转成品" :value="reportInfo.dayTransFinishNum" />
            <ListItem label="本月转成品" :value="reportInfo.monthTransFinishNum" /> -->
          </List>
        </CardContainer>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import ContentWrap from '@/components/ContentWrap'
import Card from '@/components/Card'
import CardContainer from '@/components/CardContainer'
import { List, ListItem } from '@/components/List'
import { optyReport } from '@/api/crm'
export default {
  name: 'CRMReport',
  components: {
    Card,
    CardContainer,
    List,
    ListItem
  },
  data() {
    return {
      loading: false,
      reportInfo: {
        dayIntentionalRate: 0,
        dayForecastRate: 0,
        monthIntentionalRate: 0,
        monthForecastRate: 0,
        lastMonthIntentionalRate: 0,
        lastMonthForecastRate: 0
      },
      clientInfoArr: [
        {
          label: '今日新增客户：',
          value: ''
        },
        {
          label: '今日外呼客户：',
          value: ''
        },
        {
          label: '今日接通客户：',
          value: ''
        },
        {
          label: '今日无效客户：',
          value: ''
        },
        {
          label: '今日分配客户：',
          value: ''
        },
        {
          label: '本月新增客户：',
          value: ''
        },
        {
          label: '本月外呼客户：',
          value: ''
        },
        {
          label: '本月接通客户：',
          value: ''
        },
        {
          label: '今日无效客户：',
          value: ''
        },
        {
          label: '本月分配客户：',
          value: ''
        }
      ],
      orderInfoArr: [
        {
          label: '今日流失数量：',
          value: ''
        },
        {
          label: '今日量尺数量：',
          value: ''
        },
        {
          label: '今日订单数量：',
          value: ''
        },
        {
          label: '今日合同数量：',
          value: ''
        },
        {
          label: '今日CDS订单数量：',
          value: ''
        },
        {
          label: '本月流失数量：',
          value: ''
        },
        {
          label: '本月量尺数量：',
          value: ''
        },
        {
          label: '本月订单数量：',
          value: ''
        },
        {
          label: '本月合同数量：',
          value: ''
        },
        {
          label: '本月CDS订单数量：',
          value: ''
        }
      ]
    }
  },
  mounted() {
    this.loading = true
    optyReport().then(res => {
      this.loading = false
      if (res.success === 1) {
        const data = res.data[0]
        this.clientInfoArr = [
          {
            label: '今日新增客户：',
            value: data.dayIncreaseNum
          },
          {
            label: '今日外呼客户：',
            value: data.dayCallNum
          },
          {
            label: '今日接通客户：',
            value: data.dayConnectNum
          },
          {
            label: '今日无效客户：',
            value: data.dayInvalidNum
          },
          {
            label: '今日分配客户：',
            value: data.dayAssignedNum
          },
          {
            label: '本月新增客户：',
            value: data.monthIncreaseNum
          },
          {
            label: '本月外呼客户：',
            value: data.monthCallNum
          },
          {
            label: '本月接通客户：',
            value: data.monthConnectNum
          },
          {
            label: '本月无效客户：',
            value: data.monthInvalidNum
          },
          {
            label: '本月分配客户：',
            value: data.monthAssignedNum
          }
        ]
        this.orderInfoArr = [
          {
            label: '今日流失数量：',
            value: data.dayLostNum
          },
          {
            label: '今日量尺数量：',
            value: data.dayMeasuringScaleNum
          },
          {
            label: '今日订单数量：',
            value: data.dayDepositNum
          },
          {
            label: '今日合同数量：',
            value: data.daySignNum
          },
          {
            label: '今日CDS订单数量：',
            value: data.dayCDSOrderedNum
          },
          {
            label: '本月流失数量：',
            value: data.monthLostNum
          },
          {
            label: '本月量尺数量：',
            value: data.monthMeasuringScaleNum
          },
          {
            label: '本月订单数量：',
            value: data.monthDepositNum
          },
          {
            label: '本月合同数量：',
            value: data.monthSignNum
          },
          {
            label: '本月CDS订单数量：',
            value: data.monthCDSOrderedNum
          }
        ]
        const reportInfo = data
        reportInfo.dayIntentionalRate = reportInfo.dayIntentionalRate ? Number(reportInfo.dayIntentionalRate) * 100 : 0
        reportInfo.dayForecastRate = reportInfo.dayForecastRate ? Number(reportInfo.dayForecastRate) * 100 : 0
        reportInfo.monthIntentionalRate = reportInfo.monthIntentionalRate ? Number(reportInfo.monthIntentionalRate) * 100 : 0
        reportInfo.monthForecastRate = reportInfo.monthForecastRate ? Number(reportInfo.monthForecastRate) * 100 : 0
        reportInfo.lastMonthIntentionalRate = reportInfo.lastMonthIntentionalRate ? Number(reportInfo.lastMonthIntentionalRate) * 100 : 0
        reportInfo.lastMonthForecastRate = reportInfo.lastMonthForecastRate ? Number(reportInfo.lastMonthForecastRate) * 100 : 0
        this.reportInfo = reportInfo
      }
    }).catch(er => {
      this.loading = false
    })
  }
}
</script>

<style lang="scss" scope>
@import "@/styles/mixin.scss";
.report {
  .reportTitle {
    padding: 10px 0 10px 0;
    @include flex($justify: flex-start);
    & span.title {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 22px;
      letter-spacing: 1px;
    }
    & span.currentDate {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #888888;
      padding: 8px 0 0 5px;
    }
  }
  .sliderClass {
    font-size: 13px;
    @include flex($justify: flex-start, $align: center);
    .intention {
      width: 100px;
    }
    .slider {
      width: 68%;
      // height: 4px;
      // background: rgba(225,233,241,1);
      // border-radius: 3px;
    }
    & > * {
      margin-right: 10px;
    }
  }
  .clientInfo {
    .card-container-body {
      width: 100%;
      @include flex($justify: flex-start, $align: center);
      flex-flow: row wrap;
      .item {
        flex: 0 0 20%;
        color: #333333;
        font-size: 14px;
        padding: 10px;
      }
    }
  }
  .client {
    padding: 10px 10px 0 10px;
    .custom-list-item {
      margin-bottom: 20px;
    }
  }
  & > * {
    margin-bottom: 10px;
  }
  .el-slider__button-wrapper .el-tooltip {
    display: none;
  }
  .el-slider__runway.disabled .el-slider__bar {
    background-color: #3dc094;
  }
}
</style>
